<template>
  <t-modal
    title="人员选择"
    :width="800"
    :visible="visible"
    wrapClassName="t-popup-modal"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :destroyOnClose="true"
  >
    <div class="transfer-body">
      <div class="transfer-pane">
        <div class="transfer-pane-tools">
          <a-row style="width: 100%">
            <a-input-search
              placeholder="请输入用户名称"
              style="width: 100%"
              @search="onSearch"
            />
          </a-row>
        </div>
        <div class="transfer-pane-body">
          <a-tabs default-active-key="1" @change="tabChange">
            <a-tab-pane key="1" tab="部门">
              <a-tree
                v-if="showTree"
                blockNode
                show-icon
                :tree-data="treeData"
                :replaceFields="replaceFields"
                :defaultExpandAll="defaultExpandAll"
                :defaultExpandedKeys="defaultExpandedKeys"
                @select="selectTree"
              >
                <template v-for="item in dataList">
                  <icon-fonts
                    :slot="item.key"
                    :icon="'icon-' + item.icon"
                    type="small"
                    style="margin-right:5px"
                  ></icon-fonts>
                </template>
              </a-tree>
            </a-tab-pane>
            <!-- <a-tab-pane key="2" tab="角色">
							
						</a-tab-pane>
						<a-tab-pane key="3" tab="岗位">
							
						</a-tab-pane> -->
          </a-tabs>
        </div>
      </div>
      <div class="divider-box"></div>
      <div class="transfer-pane">
        <div class="transfer-pane-tools">
          <span>已选择({{ selectData.length ? selectData.length : 0 }})</span>
          <span @click="selectData = []" class="delete-button">清空</span>
        </div>
        <div class="transfer-pane-body">
          <span v-for="item in selectData">
            <a-tag
              :key="item.userNameId"
              closable
              @close="() => handleTagClose(item.userNameId)"
            >
              {{ item.userNameAndId }}
            </a-tag>
          </span>
        </div>
      </div>
    </div>
  </t-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
    },
    url: {
      type: String,
    },
    dataList: {
      type: Array,
    },
    rawTreeData: {
      type: Array,
    },
    multiple: {
      type: Boolean,
    },
    treeText: {
      type: String,
      default: "orgName",
    },
  },
  watch: {
    rawTreeData: {
      deep: true,
      immediate: true,
      handler: function(e) {
        if (e.length) {
          this.defaultExpandedKeys = [e[0].id];
        }
        this.treeData = e;
      },
    },
  },
  data() {
    return {
      treeData: [],
      selectData: [],
      replaceFields: {
        children: "children",
        title: this.treeText,
        key: "id",
      },
      showTree: true,
      tabKey: false,
      defaultExpandedKeys: [],
      defaultExpandAll: false,
    };
  },
  methods: {
    handleOk() {
      if (!this.selectData.length) {
        this.$message.warn("请先选择数据", 1.5);
      } else {
        this.$emit("confirm", this.selectData);
      }
    },
    handleCancel() {
      this.$emit("cancel");
    },
    selectTree(selectedKeys, info) {
      if (!info.selected) {
        return;
      }
      let props = info.selectedNodes[0].data.props;
      if (
        this.selectData.some((item) => item.userNameId == props.id) ||
        !props.user
      ) {
        return;
      }
      if (this.multiple) {
        this.selectData.push({
          userName: props.userName,
          userNameAndId: props[this.treeText],
          userNameId: props.id,
          uuid: props.uuid,
        });
      } else {
        this.selectData = [
          {
            userName: props.userName,
            userNameAndId: props[this.treeText],
            userNameId: props.id,
            uuid: props.uuid,
          },
        ];
      }
    },
    onSearch(value) {
      this.showTree = false;
      if (value) {
        this.treeData = this.treeFilter(
          value,
          JSON.parse(JSON.stringify(this.rawTreeData))
        );
        this.defaultExpandAll = true;
      } else {
        this.treeData = JSON.parse(JSON.stringify(this.rawTreeData));
        this.defaultExpandAll = false;
      }
      this.$nextTick(() => {
        this.showTree = true;
      });
    },
    handleTagClose(key) {
      const data = this.selectData.filter((item) => item.userNameId !== key);
      this.selectData = data;
    },
    treeFilter(value, arr) {
      if (!arr) {
        return [];
      }
      let newarr = [];
      arr.forEach((item) => {
        if (item[this.treeText].indexOf(value) > -1) {
          let redata = this.treeFilter(value, item.children);
          let obj = {
            ...item,
            children: redata,
          };
          newarr.push(obj);
        } else {
          if (item.children && item.children.length > 0) {
            let redata = this.treeFilter(value, item.children);
            let obj = {
              ...item,
              children: redata,
            };
            if (redata && redata.length > 0) {
              newarr.push(obj);
            }
          }
        }
      });
      return newarr;
    },
    tabChange(key) {
      this.tabKey = key;
    },
  },
};
</script>

<style scoped lang="less">
/deep/.ant-modal-body {
  background-color: #f0f2f5 !important;
  padding: 10px !important;
}
.transfer-body {
  line-height: 32px;
  display: flex;
  width: 100%;
  height: 400px;
  justify-content: space-around;
  .transfer-pane {
    padding: 10px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    .transfer-pane-tools {
      height: 40px;
      display: flex;
      justify-content: space-between;
      .delete-button {
        cursor: pointer;
        color: red;
      }
    }
    .transfer-pane-body {
      width: 100%;
      height: calc(100% - 40px);
      overflow: auto;
      // overflow-x: hidden;
      font-size: 14px;
      // border: 1px solid #dcdfe6;
      // border-radius: 4px;
      .transfer-pane-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
      }
    }
  }
}
.divider-box {
  background-color: #f0f2f5;
  width: 10px;
  height: 100%;
}
.ant-tag {
  font-size: 14px !important;
}
/deep/.ant-tabs {
  height: 100%;
}
/deep/.ant-tabs-content {
  height: calc(100% - 50px);
  overflow: auto;
}
</style>
